<%layout("/eova/layout/list.html",{'title' : '元字段编辑-' + objectCode}){%>
<div class="eova-layout" style="width: calc(100% - 20px); height: calc(100% - 20px); margin: 10px;">
	<div class="box" style="width: 100%; height: 100%;">
		<div class="layui-btn-container" id="toolbar" style="display: none;">
			<%include('/eova/meta/edit/syncnew.html',{'gridId': 'fieldTable'}){}%>
			<%include('/eova/meta/edit/virtual.html',{'gridId': 'fieldTable'}){}%>
			<%include('/eova/meta/edit/dict.html',{'gridId': 'fieldTable'}){}%>
			<%include('/eova/meta/edit/delete.html',{'gridId': 'fieldTable'}){}%>
			&nbsp;&nbsp;&nbsp;&nbsp;我胡汉三又回来了:拖拽行号可排序!
		</div>
			
		<#table id="fieldTable" toolbar="toolbar" objectCode="eova_field_code" isFirstLoad="true" isPaging="false" isCellEdit="true" where="fieldTableWhere()"/></div>
	</div>
</div>

<script>
// 自定义Table条件:
function fieldTableWhere(){
	return  {query_object_code : '${objectCode}'}
}


// 数据加载完成 拖拽排序
var $numbers;
function fieldTableDone(res, curr, count){
	
	$numbers = $('.laytable-cell-numbers').parent();
	$numbers.attr("draggable", "true").attr("title", "拖拽排序").css("cursor", "move").attr("ondragstart", "drag(event)");
	$numbers.attr("ondrop", "drop(event)").attr("ondragover", "dragenter(event)").attr("ondragleave", "dragleave(event)");
}
function drag(e) {
	e.dataTransfer.setData("en", $(e.target).next().text());
}
function dragenter(e) {
	console.log("allowDrop");

	$(e.target).parent().css("border-bottom", "solid red 2px");

	e.preventDefault();
}
function dragleave(e) {
	$(e.target).parent().css("border-bottom", "");
	
	e.preventDefault();
}
function drop(e) {
	e.preventDefault();
	
	$(e.target).parent().css("border-bottom", "");
	
	var source = e.dataTransfer.getData("en");
	var $target = $(e.target).parent();
	if ($target.text() == '') {
		$.msg('无效拖拽');
		return;
	}
	target = $target.next().text();
	// 选中其它节点才触发排序
	if (target != '' && source != target) {
		console.log($.str.format("drop ok {0} move {1} after"));
		$.syncGetJson($.str.format("/meta/swap/{0}-{1}-{2}", '${objectCode}', source, target), function(json) {
			$.tableReLoad('fieldTable');
		});
	}
}

</script>

<%}%>